<template>
<div>
    <setHeader :title="headerTitle"></setHeader>
    <div class="content">
      <div class="main-navigater">
          <!-- <div class="main_menu">
              <label for=""><i class="iconfont icon-xingzhuang-tupian main_menu_icon"></i>智能海报</label>
              <a href="javascript:void(0)"><i class="iconfont icon-xiangyou"></i></a>
          </div> -->
          <div class="main_menu"  @click="tagShow">
              <label for=""><i class="iconfont icon-fujinquanzi main_menu_icon"></i>附近的圈子</label>
              <a href="javascript:void(0)"><i class="iconfont icon-xiangyou"></i></a>
          </div>
          <div class="main_menu" @click="CircleList()">
              <label for=""><i class="iconfont icon-quanzifenlei main_menu_icon"></i>圈子分类导航</label>
              <a href="javascript:void(0)"><i class="iconfont icon-xiangyou"></i></a>
          </div>
          <!-- <div class="main_menu" @click="productmanageClick()">
              <label for=""><i class="iconfont icon-chanpin main_menu_icon"></i>扫一扫进圈</label>
              <a href="javascript:void(0)"><i class="iconfont icon-xiangyou"></i></a>
          </div> -->
          <div class="main_menu" @click="userCircle()">
              <label for=""><i class="iconfont icon-wodequanzi1 main_menu_icon"></i>我的圈子</label>
              <a href="javascript:void(0)"><i class="iconfont icon-xiangyou"></i></a>
          </div>
          <div class="main_menu" @click="crcircle()">
              <label for=""><i class="iconfont icon-chuangjianquanzi main_menu_icon"></i>创建圈子</label>
              <a href="javascript:void(0)"><i class="iconfont icon-xiangyou"></i></a>
          </div>
         
      </div>
    </div>
    <so-footer></so-footer>
</div>
</template>

<script>
import Checkbox from '../components/Checkbox.vue';
import setHeader from '../public/setHeader.vue';
import soFooter from '../components/footer-bar';
import {createGroup,friendList} from '../api/api'
import { MessageBox } from 'mint-ui';
import wx from 'weixin-js-sdk';
  export default {
    data() {
      return {
        headerTitle:'创建群聊',
        search: '',
        friendList: [], // 好友列表
        haveNotReadApply: true,
        chatList: [],  // 聊天列表
        groupIdList: [],//群聊
        showaddress:'',//定位
      }
    },
    components: {
      setHeader,
      soFooter,
      Checkbox,
    },
    computed: {
      imageUrl () {
        return imageUrl;
      },
      // 获取头像
      avatar () {
        return this.$store.state.info.avatar;
      },
      // 聊天搜索,排序
      filterChatList () {
        this.chatList = this.chatList.sort((a, b) => {
          if (a.online > b.online) {
            return -1
          } else if (a.online === b.online) {
            if (a.last_chat_time > b.last_chat_time) {
              return -1
            } else {
              return 1
            }
          } else {
            return 1
          }
        })
        if (this.search.chat !== '') {
          return this.chatList.filter((element) => {
            if (element.username) {
              return element.username.indexOf(this.search.chat) !== -1;
            } else {
              return element.group_name.indexOf(this.search.chat) !== -1;
            }
          })
        }
        console.log(9898);
        return this.chatList;
      },
      filterFriendList () {
        if (this.search.friend !== '') {
          return this.friendList.filter((element) => {
            return element.username.indexOf(this.search.friend) !== -1;
          })
        }
        return this.friendList;
      }
    },
    methods : {
      //进入我的圈子
      userCircle(){
         this.$router.push({path: '/userCircle'}); 
      },
      //进入创建圈子
      crcircle(){
        this.$router.push({path: '/crcircle'}); 
      },
      //进入创建圈子
      crcircle(){
        this.$router.push({path: '/crcircle'}); 
      },
      //进入圈子分类导航
      CircleList(){
        this.$router.push({path: '/home/CircleList?paicheNo=0'}); 
      },
      //附近的圈子
      tagShow(){
        var ua = navigator.userAgent.toLowerCase();
  　　  var isWeixin = ua.indexOf('micromessenger') != -1;
  　　  if (isWeixin) {  //微信
          console.log('微信浏览器的');
          this.location();
  　　  }else{          //普通浏览器
          console.log('普通浏览器的');
          this.BaiDumap();
  　　  }
      },
      /**
       * 通过定位拿到当前地址，便于修改
       */
      location: function(){
          // alert('进来了微信');
          var that = this;
          // var url = location.href.split('#')[0];
          var u = navigator.userAgent;
          var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
          var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
          let url='';
          if (isAndroid) {
              url=location.href;
          }
          if (isIOS) {
              url=location.href.split('#')[0];  //hash后面的部分如果带上ios中config会不对
          }
          console.log('检测url',url);
          that.$post(that.$path + '/index.php/api/v2/getJsapiTicket', {url: url}).then((res) => {
              console.log('微信res',res);
              if(res.code == 200){
                  wx.config({
                      debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                      appId: res.data.appid, // 必填，公众号的唯一标识
                      timestamp: res.data.timestamp, // 必填，生成签名的时间戳
                      nonceStr: res.data.noncestr, // 必填，生成签名的随机串
                      signature: res.data.signature,// 必填，签名
                      jsApiList: ['checkJsApi', 'openLocation', 'getLocation'] // 必填，需要使用的JS接口列表
                  });
                  wx.ready(function(){
                      wx.checkJsApi({
                          jsApiList: ['openLocation', 'getLocation'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                          success: function(res) {
                              console.log(res)
                              // alert(res);
                              // 以键值对的形式返回，可用的api值true，不可用为false
                              // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                          }
                      });
                      // 使用微信获取经纬度，在用百度地图的逆地址解析，解析出经纬度对应的地名
                      wx.getLocation({
                          type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                          success: function (res) {
                              var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                              var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                              // var pt = {lat: res.latitude, lng: res.longitude}
                              // alert('经度：' + res.longitude);
                              // alert('维度：' + res.latitude);
                              var pt = new BMap.Point(res.longitude, res.latitude)
                              // var pt = new BMap.Point(116.354969, 39.348339)
                              var geoc = new BMap.Geocoder(); 
                              geoc.getLocation(pt, function(rs){
                                  console.log('999',rs)
                                  that.showaddress = rs.addressComponents.district;
                                  that.$router.push({path: '/nearby', query: {cityName:that.showaddress}}); 

                              })
                          }
                      });
                      
                  });
                  wx.error(function(res){
                      // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                      console.log(res);
                  });
              }
          })
      },
      BaiDumap:function()
      {   
          console.log('进来了百度地图');
          var that = this;
          var geolocation = new BMap.Geolocation();
          geolocation.getCurrentPosition(function(r){
            // console.log('r',r);
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMap.Marker(r.point);
                // console.log('mk',mk);
                // map.addOverlay(mk);
                // map.panTo(r.point);
                // alert('您的位置：'+r.point.lng+','+r.point.lat);
                // alert('您的位置:'+r.address.province + ',' + r.address.city);
                var point = new BMap.Point(r.point.lng,r.point.lat);
                var geoc = new BMap.Geocoder(); 
                geoc.getLocation(point, function(rs){
                    console.log(rs)
                    that.showaddress = rs.addressComponents.district;
                    that.$router.push({path: '/nearby', query: {cityName:that.showaddress}}); 
                    // that.CardDetails.CardCompanyAddress = rs.address;
                })
            }
            else {
                // alert('failed'+this.getStatus());
            }        
        },{enableHighAccuracy: true})
      },
      // 获取朋友列表
      handleFriendList () {
        let access_token = window.localStorage.getItem('access_token');
        friendList({access_token: access_token}).then(res => {
          console.log(res);
          if(res.code == 200) {
            this.friendList = res.data;
          }
          // if (this.currentFriend.id === '' && this.friendList.length > 0) {
          //   this.selectFriend(this.friendList[0])
          // }
        })
      },

      //点击选择朋友加入群聊
      addgroup (id) {
        console.log(id);
        this.groupIdList.push(id);
        console.log(this.groupIdList);
      },
      // 创建群组
      handleCreateGroup () {
        if (this.groupIdList.length === 0) {
          MessageBox('提示','请选择群组人员');
          return false
        }
        this.$prompt('请输入群组名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          createGroup({ids: this.groupIdList, name: value}).then(res => {
            if (parseInt(res.status) === 1) {
              //this.$emit('update:visible', false)
              this.groupIdList = []
              this.$router.replace({
                  path: '/information',
              });
            }
          })
        })
      },
    },
    mounted () {
      this.handleFriendList()
      this.$store.commit('setPage', 2);//设置需要预请求的参数
      if (!window.BMap) {
          var script = $('<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=' + this.$baidu_map_ak + '"></sc' + 'ript>');
          var script2 = $('<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&amp;ak=' + this.$baidu_map_ak + '&amp;services=&amp;t=20190123111209"></s' + 'cript>');
          $('body').append(script);
          $('body').append(script2);
          console.log('百度地图加载');
      }
    },
    
  }

</script>
<style>
.main_group_lists {
  padding: 0.2rem 0;
}
.main_group_lists .group{
    margin: 0.2rem;
    height: 0.44rem;
    position: absolute;
    width: 100%;
    left: 0;
    text-align: left;
}
.main_group_lists .main_group_left {
    width: 1rem;
    height: 1rem;
    margin: auto;
    margin-left: 0.7rem;
}
.main_group_left img {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 30%;
    vertical-align: super;
}
.main_group_lists .main_group_desc {
    margin: auto;
    width: 5.2rem;
    border-bottom: 1px solid #d8d8d8;
}
.main_group_desc h5 {
    font-size: 0.28rem;
    color: #333;
    line-height: 0.48rem;
    height: 0.48rem;
    text-align: left;
}
.main_group_desc span {
    font-size: 0.24rem;
    color: #666;
    padding-bottom: 0;
    background-color: transparent;
    width: 4.2rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    height: 0.48rem;
    line-height: 0.48rem;
    float: left;
}


/* .group{
    margin: 0.2rem;
    height: 0.44rem;
    position: absolute;
    width: 100%;
    left: 0;
    text-align: left;
}
.dot{
  position: absolute;
  top: 25px;
  right: 5px;
  background-color: #fa5555;
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  height: 10px;
  width: 10px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #fff;
} */

</style>
